<template>
  <div class="vacation-rules-container">
    <el-table
      v-loading="loading"
      :data="shops"
      :tree-props="tableTreeProps"
      border
      default-expand-all
      row-key="selfid"
    >
      <el-table-column label="门店名称" prop="shop_name" />
      <el-table-column label="门店地址" prop="address" />
      <el-table-column label="操作" width="180">
        <template #default="{ row }">
          <el-button type="primary" link @click="handleEdit(row)" v-if="row.level!=1" > 编辑 </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { getShops } from "@/api/shop";
import { useRouter } from "vue-router";
import { schedulingManageStore } from "@/stores/schedulingManage";
import { ProcessedShopResponse } from "@/api/types/shop";

const schedulingManageStoreData = schedulingManageStore();

const router = useRouter(); // 引入路由

const shops = ref<any>([]);
const tableTreeProps = {
  children: "childs",
};

const loading = ref(<Boolean>true);

// 编辑
const handleEdit = (row: any) => {
  // console.log(row);
  
  schedulingManageStoreData.setshopData(row);

  sessionStorage.setItem("shop_id", row.selfid);

  if (row.is_super == "1") {
    router.push({
      path: "/schedulingManage/PremiumStore",
    });
  } else {
    router.push({
      path: "/schedulingManage/detail",
    });
  }
};

//初始化获取数据
const getData = async () => {
  const { result } = await getShops();

  // shops.value = [];
  // result?.forEach((item: any) => {
  //   shops.value.push(...item.childs);
  // });
  if (result !== undefined) {
    shops.value = result.map((shopResponse) => {
      return {
        level: 1,
        ...shopResponse,
        childs: shopResponse.childs?.map(
          (shopResponse) =>
            ({
              ...shopResponse,
              level: 2,
            } as ProcessedShopResponse)
        ),
      };
    });

    loading.value = false;
  }
};
// 初始化数据
onMounted(() => {
  getData();
  sessionStorage.clear();
});
</script>

<style lang="scss" scoped>
.vacation-rules-container {
  padding: 20px;
  background: #fff;
  border-radius: 4px;

  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    h2 {
      margin: 0;
      font-size: 18px;
      font-weight: 600;
    }
  }

  :deep(.el-button) {
    .el-icon {
      margin-right: 4px;
    }
  }
}
</style>
